<template>
  <el-container>
    <el-main>
      <el-button @click="toBack">返回</el-button>
      <el-button v-print="'#print'" type="primary">打印</el-button>
      <!-- <h3 align="center">{{ name }}</h3> -->
      <div id="print" class="app-container">
        <h1 align="center">供应商纸板报价打印</h1>
        <p align="center">打印日期:{{ dateFormat(new Date()) }}</p>
        <table>
          <tr>
            <td>编码</td>
            <td style="width:800px;">简称</td>
            <td style="width:800px;">全称</td>
            <td style="width:250px;">报价单位</td>
            <td style="width:250px;">纸板名称</td>
            <td>楞型</td>
            <td style="width:240px;">纸板报价</td>
            <td style="width:240px;">优惠设定</td>
            <td>总价</td>
          </tr>
          <tr v-for="item in tableData" :key="item.id">
            <td>{{ item.code }}</td>
            <td>{{ item.abbreviation }}</td>
            <td>{{ item.fullName }}</td>
            <td>{{ item.quotationUnit }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.ridgeType }}</td>
            <td>{{ item.cardboardQuotation }}</td>
            <td>{{ item.preferentialSetting }}</td>
            <td>{{ item.totalPrice }}</td>
          </tr>
          <!-- <tr>
            <td>送货总量：</td>
            <td>本页小计(人民币)：</td>
            <td>合计金额：23802</td>
          </tr> -->
        </table>
        <!-- <el-table
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column property="code" label="编码" />
          <el-table-column property="abbreviation" label="简称" />
          <el-table-column property="fullName" label="全称" />
          <el-table-column property="quotationUnit" label="报价单位" />
          <el-table-column property="name" label="纸板名称" />
          <el-table-column property="ridgeType" label="楞型" />
          <el-table-column property="cardboardQuotation" label="纸板报价" />
          <el-table-column property="preferentialSetting" label="优惠设定" />
          <el-table-column property="totalPrice" label="总价" />
        </el-table>

        <el-pagination
          background
          layout="total, sizes, prev, pager, next"
          :total="pagination.total"
          align="center"
          :current-page="pagination.page"
          :page-size="pagination.size"
          @size-change="sizeChange"
          @current-change="pageChange"
        /> -->
      </div>
    </el-main>
  </el-container>
</template>

<script scope>
import initData from '@/mixins/initData'
import { list } from '@/api/basedata/firm'

export default {
  name: 'SupplierCardboardPrinting',
  mixins: [initData],
  data() {
    return {
      tableData: [],
      data: [],
      name: ''
    }
  },
  created() {
    this.data = this.$route.query.data
    this.getList()
  },
  methods: {
    dateFormat: function(time) {
      var date = new Date(time)
      var year = date.getFullYear()
      /* 在日期格式中，月份是从0开始的，因此要加0
     * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
     * */
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      // var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      // var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      // var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      // 拼接
      return year + '-' + month + '-' + day
    },
    getList() {
      this.tableData = this.data
      this.tableData.forEach(a => {
      })
      this.pagination.total = this.tableData.length
      list().then(res => {
        var firmList = []
        firmList = res.list
        firmList.forEach(a => {
          if (a.isFirm === true) {
            this.name = a.name
          }
        })
      })
    },
    // 返回
    toBack() {
      this.$router.push('/supplier_cardboard_quotation')
    }
  }
}
</script>

<style scoped>
i {
  cursor: pointer;
}
table,tr,td{
  border:1px solid black;
}
table{
  width:1000px;
  border-collapse:collapse;
  height: auto;
  margin: 0 auto;

}
tr{
  height: 35px;
}
table td{
  height: 35px;
}
td{
  width: 120px;
  text-align: center ;
}
</style>
<style media="print">
  body {
    border: solid 1px #ffffff;
    margin:0;
  }
</style>
